<template>
  <div class="massage">
    <h3 class="title">酒店标题 <b>*</b><span>带*号的必填</span></h3>
    <table>
      <tr>
        <td><b>*</b>总体评价：</td>
        <td>
          <el-rate v-model="value" :colors="colors"> </el-rate>
        </td>
      </tr>
      <tr>
        <td><b>*</b>内容：</td>
        <td>
          <el-input
            type="textarea"
            placeholder="100个子+3张图片，有机会选为优质评论"
            v-model="textarea"
            maxlength="10000"
            show-word-limit
          >
          </el-input>
        </td>
      </tr>
      <tr>
        <td>上传图片：</td>
        <td>
          <el-upload
            class="avatar-uploader"
            action="http://39.103.238.144:3000/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </td>
      </tr>
      <tr>
        <td></td>
        <td><button class="submit" @click="submit">提交信息</button></td>
      </tr>
    </table>
  </div>
</template>

<script>
import session from '../../http/session'
export default {
  data() {
    return {
      picture:"",
      imageUrl: "",
      textarea: "",
      dialogImageUrl: "", //大图的路径
      dialogVisible: false,
      newpath: [], //上传图片的新路径
      value: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
    };
  },
  methods: {
    // 移除图片
    handleRemove(file, fileList) {
      console.log(this.imguid);
      console.log(file.uid);
      for (let i = 0; i < this.imguid.length; i++) {
        if (this.imguid[i] == file.uid) {
          this.newpath.splice(i, 1);
          // console.log("remove", this.newpath);
        }
      }
    },
    // 放大图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 图片组件
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.picture = res.data

      // 更新到数据库
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 发布评论
    submit() {
      if (!this.value) {
        this.$message({
          type: "error",
          message: `请评分`,
        });
      } else if (!this.textarea) {
        this.$message({
          type: "error",
          message: `请输入你的评论`,
        });
      }else{
        // console.log(this.textarea);
        // console.log(this.picture);
        // console.log(this.$route.params.id);
        session().then(res=>{
          this.$http.post('/hotelrecomm',{
            mid:this.$route.params.id,
            image:this.picture,
            centent:this.textarea,
            avatar:res.data.data[0].avatar,
            uname:res.data.data[0].uname
          }).then(result=>{
            this.$message({
              type: "success",
              message: `评论成功`,
            });
            window.history.go(0)
          })
        })
      }

    },
  },
};
</script>

<style lang="scss" scoped>
.massage {
  width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  .title {
    text-align: center;
    b {
      color: red;
      margin-left: 20px;
    }
    span {
      font-size: 12px;
      font-weight: 100;
    }
  }
  table {
    width: 800px;
    td {
      padding: 10px;
    }
    td:first-child {
      width: 100px;
      b {
        color: red;
      }
    }
    .submit {
      padding: 10px 30px;
      border: 0;
      border-radius: 5px;
      background: #409eff;
      color: #fff;
    }
  }
}
.avatar-uploader {
  border: 1px dashed #c0bebe;
  width: 150px;
  height: 150px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  .avatar{
    width: 100%;
    height: 100%;
  }
}
.avatar-uploader-icon{
  width: 150px!important;
  height: 150px!important;
}
/* .el-icon-plus avatar-uploader-icon */
</style>